<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script src="${base}/js/jquery-1.9.1.js"></script>
<script src="${base}/plugin/Sortable/Sortable.js"></script>

<style type="text/css">
.index_type{
  width: 800px;
  height: 800px;
}
.button_item{
  border: solid 1px;
  width: 100px;
  height: 100px;
  display: inline-block;
  float: left;
}

.sortable_div{
  border: solid 1px;
  width: 800px;
}
.sortable_div div{
  border: solid 1px;
  display: inline-block;
  width: 100px;
  height: 100px;
  float: left;
}
</style>
</head>
<body>
    <div class="index_type">
		<div class="sortable_div" id="sortable">
			<div>Item 1.1</div>
			<div>Item 1.2</div>
			<div>Item 1.3</div>
			<div>Item 1.4</div>
			<div>Item 1.5</div>
		</div>
		<div class="button_item">修改</div>
		<div class="button_item">添加</div>
    </div>


	<script type="text/javascript">
		//获取对象
		var el = document.getElementById('sortable');
		//设置配置
		var ops = {
			animation : 1000,
			//拖动结束
			onEnd : function(evt) {
			   var itemEl = evt.item; 
			   console.log(itemEl);
		       var oldIndex = evt.oldIndex; 
		       var newIndex = evt.newIndex; 
		       console.log(oldIndex+"---"+newIndex);
			}
		};
		
		
		//初始化
		var sortable = Sortable.create(el, ops);
	</script>
</body>
</html>